<template>
  <div class="service">
    <Header />
    <div class="head_img">
      <img :src="baseURL + img" alt="" />
    </div>
    <div class="title">
      <div class="title_left">
        <span>业务与服务</span>
      </div>
      <div class="title_right">
        {{ title }} <span v-if="crumb != ''">></span> {{ crumb
        }}<span v-if="crumbs != ''">></span>{{ crumbs }}
      </div>
    </div>
    <div class="service_content">
      <!-- 左侧导航 -->
      <div class="service_name">
        <!-- 一级菜单 -->
        <van-collapse v-model="activeNames" ref="firstItem">
          <van-collapse-item
            v-for="(item, index) in leftNav"
            :key="index"
            :title="item.title"
            @click.native="first(item)"
            :name="item.id + 'frist'"
          >
            <!-- 二级菜单 -->
            <van-collapse v-model="activeNames" class="secondItem">
              <van-collapse-item
                v-for="(item1, index1) in item.child"
                :title="item1.title"
                :key="index1"
                :name="item1.id + 'second'"
                @click.native.stop="second(item1, index1)"
                :class="true ? 'colorTolleFont' : ''"
                :is-link="item1.child.length > 0 ? true : false"
                id="two_cell"
              >
                <!--三级菜单 -->
                <van-collapse v-model="activeNames">
                  <van-collapse-item
                    v-for="(item2, index2) in item1.child"
                    :title="item2.title"
                    :key="index2"
                    :name="item2.id + 'third'"
                    @click.native.stop="three(item2)"
                    :is-link="item2.child.length > 0 ? true : false"
                    id="three_cell"
                  >
                    <!-- 四级 -->
                    <van-collapse v-model="activeNames">
                      <van-collapse-item
                        v-for="(item3, index3) in item2.child"
                        :title="item3.title"
                        :key="index3"
                        :name="item3.id + 'third'"
                        @click.native.stop="three(item3)"
                        :is-link="item3.child.length > 0 ? true : false"
                        id="four_cell"
                      >
                      </van-collapse-item>
                    </van-collapse>
                  </van-collapse-item>
                </van-collapse>
              </van-collapse-item>
            </van-collapse> </van-collapse-item
        ></van-collapse>
      </div>
      <!-- 右侧数据 -->
      <div class="server_rightt" v-if="title2">
        <div class="server_title">暂无数据</div>
      </div>
      <div class="server_rightt" v-else>
        <div class="server_title">{{ articleInfo.title }}</div>
        <div class="server_actire" v-html="articleInfo.content"></div>
      </div>
    </div>
  </div>
</template>


<script>
import { getService, getData } from "../api/index/index";
export default {
  data() {
    return {
      activeNames: ["1"],
      leftNav: [],
      child: [],
      articleInfo: {},
      title2: false,
      show: true,
      nav_id: "",
      crumb: "",
      crumbs: "",
      title: "",
      img: "",
      baseURL: this.$store.state.baseURL,
      index11: "",
      index22: "",
      index33: "",
    };
  },
  mounted() {
    let vm = this;
    // vm.getLeftNav();
    this.getService();
    console.log(vm.$refs["firstItem"]);
    vm.$refs["firstItem"].style = {
      background: "red",
    };
  },
  methods: {
    showerSecond(item) {
      this.child = item.child;
      this.show = true;
    },
    first(item) {
      let vm = this;
      vm.title = item.title;
      vm.crumb = "";
      vm.crumbs = "";
    },
    second(item1, index1) {
      let vm = this;
      vm.nav_id = item1.id;
      vm.crumb = item1.title;
      vm.crumbs = "";
      this.index1 = index1;
      // console.log(vm.crumb);
      if (item1.child == "") {
        //强制更新
        vm.$forceUpdate();
        vm.getArticleInfo();
      }
    },
    three(item2) {
      let vm = this;
      vm.nav_id = item2.id;
      vm.crumbs = item2.title;
      // console.log(vm.title.name);
      if (item2.child == "") {
        //强制更新
        vm.$forceUpdate();
        vm.getArticleInfo();
      }
      if (item3.child == "") {
        //强制更新
        vm.$forceUpdate();
        vm.getArticleInfo();
      }
    },
    // 左侧导航数据
    async getService() {
      let vm = this;
      const res = await getService();
      console.log(res, "业务与服务");
      vm.leftNav = res.data.data.menus;
      vm.img = res.data.data.image;
    },
    //右侧数据
    async getData(data) {
      let vm = this;
      const res = await getData(data);
      console.log(res, "右侧数据");
      if (res.data.data != null) {
        vm.articleInfo = res.data.data;
        this.title2 = false;
        vm.img = res.data.data.image;
      } else {
        this.title2 = true;
      }
    },
    getArticleInfo() {
      let vm = this;
      let params = {
        id: vm.nav_id,
      };
      vm.getData(params);
    },
  },
  watch: {
    $route: function (to, from) {
      location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.colorTolleFont {
  color: red !important;
  /deep/.van-cell {
    color: red !important;
  }
}
#two_cell {
  /deep/.van-cell {
    // box-sizing: border-box;
    // padding-left: 20px;
    font-size: 16px;
    color: #333 !important;
    background: #fff !important;
  }
}

#three_cell {
  /deep/.van-cell {
    box-sizing: border-box;
    padding-left: 25px;
    font-size: 14px;
    color: #000000 !important;
    // background: blue !important;
  }
}
#four_cell {
  /deep/.van-cell {
    box-sizing: border-box;
    padding-left: 30px;
    font-size: 12px;
    color: #333 !important;
    // background: #dcdcdc !important;
  }
}
.secondItem {
  color: #333;
}
.head_img {
  width: 375px;
  height: 75px;
  img {
    width: 100%;
    height: 100%;
  }
}
.service {
  width: 375px;
  background-color: #fbfbfb;
  .title {
    width: 375px;
    height: 42px;
    display: flex;
    margin-top: 10px;
    .title_left {
      width: 120px;
      span {
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        color: #999999;
        margin-left: 23px;
        margin-top: 10px;
      }
    }

    .title_right {
      margin-left: 15px;
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
      margin-top: 2px;
    }
  }
  .service_content {
    display: flex;
    .service_name {
      width: 117px;
      /deep/.van-collapse:first-child {
        background-color: #fff;
      }
    }
    .service_text {
      width: 216px;
      margin-left: 20px;
      .service_text_title {
        text-align: center;
        margin-left: 10px;
        h3 {
          margin-top: 23px;
          font-family: Source Han Sans CN;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px;
          letter-spacing: 0em;
          text-align: left;
          color: #c4181f;
        }
      }

      .text {
        margin-top: 16px;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: 0em;
        text-align: left;
        color: #333;
      }
    }
  }
  /deep/.van-collapse-item__title--expanded .van-cell__right-icon::before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(6deg);
  }
  /deep/ .van-cell--clickable {
    background-color: #e0e0e0;
    color: #c4181f;
    height: 30px;
  }

  /deep/ .van-cell {
    padding: 5px 0 5px 14px;
    .van-cell__title {
      font-family: Source Han Sans CN;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
  }
  /deep/.van-collapse-item__content {
    padding: 0;
  }
  .server_rightt {
    flex: 1;
    padding: 10px;
    .server_title {
      width: 100%;
      display: flex;
      padding-bottom: 10px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>